<template>
  <div>
    <el-container class="hv100" style="position: relative;background-color: white;">
      <!-- 头部信息 -->
      <el-header class="padding0 panel-header no-select">
        <div class="title">
          <span class="badge badge-friend" v-if="params.source == 1">友</span>
          <span class="badge" v-else>群</span>
          <span class="name pointer">
            <span v-if="params.source == 1" @click="catFriendDetail(params.receiveId)">{{ params.nickname }}</span>
            <span v-else @click="groupBoxShow = !groupBoxShow">{{ params.nickname }}</span>
            <span class="num" v-show="groupNum && params.source == 2">({{ groupNum }}人)</span>
          </span>
        </div>
        <div class="online" v-show="params.source == 1">
          <p class="badge" :class="{'yes-badge':isOnline == true}">
            <span class="badge-status-dot badge-status-processing" v-show="isOnline == true"></span>
            <span>{{ isOnline ? '在线' : '离线' }}</span>
          </p>
          <p class="input" v-show="keyEvent.isShow">对方正在输入 ...</p>
        </div>
        <div class="means">
          <el-tooltip content="历史消息" placement="top">
            <p>
              <i class="el-icon-time" @click="findChatRecord = true"></i>
            </p>
          </el-tooltip>
          <el-tooltip content="群公告" placement="top">
            <p v-show="params.source == 2">
              <i class="iconfont icon-gonggao2" @click="isShowGroupNotice = true"></i>
            </p>
          </el-tooltip>
          <el-tooltip content="群设置" placement="top">
            <p v-show="params.source == 2">
              <i class="el-icon-setting" @click="groupBoxShow = !groupBoxShow"></i>
            </p>
          </el-tooltip>
        </div>
      </el-header>

      <!-- 主体信息 -->
      <el-main class="padding0 panel-main lm-scrollbar" ref="lumenChatPanel" id="lumenChatPanel"
               @scroll.native="talkPanelScroll($event)" style="padding-bottom: 30px;">

        <div class="talk-container no-select">
          <div class="toolbars">
            <span v-show="loadRecord.status == 0">
              <i class="el-icon-loading"></i> 正在加载数据中...
            </span>
            <span v-show="loadRecord.status == 1" @click="loadChatRecords"><i class="el-icon-bottom"></i>
              查看更多消息...</span>
            <span v-show="loadRecord.status == 2" class="not-have-msg">没有更多消息了...</span>
          </div>
        </div>

        <!-- 遍历对话记录 -->
        <div v-for="(item,idx) in records" :key="item.id">
          <!-- 群消息 -->
          <div v-if="item.msg_type == 3" class="talk-container paddingt2">
            <div v-if="item.invite.type == 1 || item.invite.type == 3" class="system-msg invite-tip">
              <a @click="catFriendDetail(item.invite.operate_user.id)">{{ item.invite.operate_user.nickname }}</a>
              <span>{{ item.invite.type == 1 ? '邀请了' : '将' }}</span>
              <template v-for="(user,uidx) in item.invite.users">
                <a @click="catFriendDetail(user.id)">{{ user.nickname }}</a>
                <em v-show="uidx < item.invite.users.length - 1">、</em>
              </template>
              <span>{{ item.invite.type == 1 ? '加入了群聊' : '踢出了群聊' }}</span>
            </div>
            <div v-else-if="item.invite.type == 2" class="system-msg">
              <a @click="catFriendDetail(item.invite.operate_user.id)">{{ item.invite.operate_user.nickname }}</a>
              <span>退出了群聊</span>
            </div>
          </div>

          <!-- 撤回消息 -->
          <div v-else-if="item.is_revoke == 1" class="talk-container paddingt2">
            <div class="system-msg">
              <span v-if="$store.state.user.uid == item.user_id">你撤回了一条消息 |
                {{ sendTime(item.created_at) }}</span>
              <span v-else-if="params.source == 1">对方撤回了一条消息 | {{ sendTime(item.created_at) }}</span>
              <span v-else>"{{ item.nickname }}" 撤回了一条消息 | {{ sendTime(item.created_at) }}</span>
            </div>
          </div>

          <div v-else class="talk-container"
               :class="{'direction-rt':item.float =='right','open-checkbox':multiSelect.isOpen === true}">
            <aside class="checkbox-column">
              <i class="el-icon-success" :class="{'selected':verifyMultiSelect(item.id)}"
                 @click="triggerMultiSelect(item.id)"></i>
            </aside>
            <aside class="avatar-column">
              <div class="avatar">
                <img :src="item.avatar" @click="catFriendDetail(item.user_id)" :onerror="$store.state.detaultAvatar"
                     width="30" height="30"/>
              </div>
            </aside>
            <div class="content-column">
              <div class="talktime" v-show="!(item.source == 2 && item.float =='left')"
                   v-text="parseTime(item.created_at,'{m}月{d}日 {h}:{i}')"></div>
              <div class="subtitle" v-if="item.source == 2 && item.float =='left'">
                <span class="nickname" v-text="item.nickname"></span>
                <span v-show="item.friend_remarks">({{ item.friend_remarks }})</span>
                <span class="talktime2">{{ parseTime(item.created_at, '{m}月{d}日 {h}:{i}') }}</span>
              </div>
              <div class="talkbox">
                <div class="arrow" v-show="item.msg_type == 1"></div>

                <!-- 文本消息 -->
                <div v-if="item.msg_type == 1" class="text-msg" @contextmenu="onCopy(idx,item,$event)">
                  <pre v-html="item.content" :id="'copy_class_'+item.id"
                       v-href="item.float =='right'?'#ffffff':'rgb(9 149 208)'"></pre>
                </div>

                <!-- 图片消息 -->
                <div v-else-if="item.msg_type == 2 && item.file.file_type == 1" class="image-msg"
                     @contextmenu="onCopy(idx,item,$event)">
                  <el-image :lazy="true" fit="cover" :style="getImgStyle(item.file.file_url)" :src="item.file.file_url"
                            :preview-src-list="images" :z-index="getImgIndex(item.file.file_url)">
                    <div slot="error" class="image-slot">
                      加载失败...
                    </div>
                    <div slot="placeholder" class="image-slot">
                      图片加载中<span class="dot">...</span>
                    </div>
                  </el-image>
                </div>

                <!-- 音频文件预留 -->
                <div class="audio-msg" v-else-if="item.msg_type == 2 && item.file.file_type == 2"></div>

                <!-- 视频文件预留 -->
                <div class="video-msg" v-else-if="item.msg_type == 2 && item.file.file_type == 3"></div>

                <!-- 文件消息 -->
                <div v-else-if="item.msg_type == 2 && item.file.file_type == 4" class="file-msg"
                     @contextmenu="onCopy(idx,item,$event)">
                  <header>
                    <div class="icon">{{ item.file.file_suffix.toUpperCase() }}</div>
                    <div class="info">
                      <p>
                        <span v-text="item.file.original_name"></span>
                        <span>({{ renderSize(item.file.file_size) }})</span>
                      </p>
                      <p>文件已成功发送, 文件助手永久保存</p>
                    </div>
                  </header>
                  <footer>
                    <a @click="download(item.id)">下载</a>
                    <a>在线预览</a>
                  </footer>
                </div>

                <!-- 会话记录消息 -->
                <div v-else-if="item.msg_type == 4" class="records-msg" @contextmenu="onCopy(idx,item,$event)"
                     @click="catForwardRecords(item.id)">
                  <div class="title" v-text="getForwardTitle(item.forward.list)"></div>
                  <div class="lists">
                    <p v-for="info in item.forward.list">
                      <span v-text="info.nickname"></span>
                      <span>:</span>
                      <span v-text="info.text"></span>
                    </p>
                  </div>
                  <div class="footer"><span>转发：会话记录 ({{ item.forward.num }}条)</span></div>
                </div>

                <!-- 代码块消息 -->
                <div v-else-if="item.msg_type == 5" class="code-msg" @contextmenu="onCopy(idx,item,$event)">
                  <i class="iconfont icon-tubiao_chakangongyi cat-code-block"
                     @click="catCodeBlock(item.code_block.code,item.code_block.code_lang)"></i>
                  <pre v-html="formatCode(item.code_block.code,item.code_block.code_lang)"></pre>
                </div>

                <!-- 未知消息 -->
                <div v-else class="text-msg">未知消息类型 {{ item.msg_type }}</div>
              </div>
            </div>
          </div>

          <div class="talk-container paddingt2" v-show="compareTime(idx,item.created_at)">
            <div class="talk-time" v-text="sendTime(item.created_at)"></div>
          </div>
        </div>
      </el-main>

      <!-- 页脚信息 -->
      <el-footer class="padding0 panel-footer" height="160">
        <template v-if="!multiSelect.isOpen">
          <editor ref="talkEditor" @send="submitSendMesage" @sendCodeBlock="sendCodeBlock"
                  @keyboard-event="keyboardEvent"/>
        </template>
        <template v-else>
          <div class="multi-select">
            <div class="multi-title" v-show="multiSelect.items.length > 0">
              <span>已选中：{{ multiSelect.items.length }} 条消息</span>
            </div>
            <div class="multi-btn-group">
              <div class="multi-icon" @click="handleMultiMode(2)">
                <i class="el-icon-position"></i>
              </div>
              <p>合并转发</p>
            </div>
            <div class="multi-btn-group">
              <div class="multi-icon" @click="handleMultiMode(3)">
                <i class="el-icon-delete"></i>
              </div>
              <p>批量删除</p>
            </div>
            <div class="multi-btn-group">
              <div class="multi-icon" @click="closeMultiSelect">
                <i class="el-icon-close"></i>
              </div>
              <p>关闭</p>
            </div>
          </div>
        </template>
      </el-footer>

      <!-- 群设置侧边栏 -->
      <div class="sidebar-box" :class="{'sidebar-box-show':groupBoxShow}" v-outside="hideChatGroup">
        <user-group v-if="params.source == 2" :group-id="params.receiveId" @close="hideChatGroup"
                    @send-group="hideChatGroup" @quit-group="quitGroupSuccess" @disturb-change="disturbChange"
                    @group-info="syncGroupInfo"/>
      </div>

      <!-- 置底按钮 -->
      <transition name="el-fade-in-linear">
        <div class="tips-board" v-show="tipsBoard" @click="talkPanelScrollBottom">
          <svg-icon icon-class="mention-down" style="width: 10px;"/>
          <span>回到底部</span>
        </div>
      </transition>
    </el-container>

    <!-- 代码查看器 -->
    <code-block v-show="codeBlock.isShow" :load-code="codeBlock.code" :load-lang="codeBlock.lang"
                @close="codeBlock.isShow = false"/>

    <!-- 会话记录查看器 -->
    <forward-records ref="forwardRecordsRef"/>

    <!-- 消息管理器 -->
    <search-chat-record v-if="findChatRecord" @close="findChatRecord = false" :source="params.source"
                        :receive-id="params.receiveId" :titleName="params.nickname"/>

    <!-- 选择联系人窗口 -->
    <select-contacts v-show="selectContacts.isShow" @close="selectContacts.isShow = false"
                     @confirm="confirmSelectContacts"/>

    <!-- 查看好友用户信息 -->
    <user-business-card ref="userBusinessCard"/>

    <!-- 群公告组件 -->
    <group-notice v-if="isShowGroupNotice" :group-id="params.receiveId" @close="isShowGroupNotice = false"/>
  </div>
</template>

<script type="text/javascript">
import Vue from "vue";
import UserBusinessCard from "@/components/user/UserBusinessCard";
import SearchChatRecord from "@/components/chat/SearchChatRecord";
import ForwardRecords from "@/components/chat/ForwardRecords";
import SelectContacts from "@/components/chat/SelectContacts";
import UserGroup from "@/components/group/UserGroup";
import GroupNotice from "@/components/group/GroupNotice";
import CodeBlock from "@/components/chat/CodeBlock";
import Editor from "@/components/editor";
import Prism from "prismjs";
import "prismjs/themes/prism-okaidia.css";
import Contextmenu from "vue-contextmenujs";

Vue.use(Contextmenu);
import {
  chatRecordsServ, forwardRecordsServ, removeRecordsServ, revokeRecordsServ,
} from "@/api/chat";
import {
  collectEmoticonServ
} from "@/api/emoticon";
import {
  formateTime, formateSize, download, parseTime, imgZoom, getSelection, copyTextToClipboard, addClass, removeClass, replaceEmoji
} from "@/utils/functions";

export default {
  name: 'talk-editor-panel',
  components: {
    Editor,
    CodeBlock,
    ForwardRecords,
    SelectContacts,
    UserGroup,
    SearchChatRecord,
    UserBusinessCard,
    GroupNotice
  },
  props: {
    //对话相关参数
    params: {
      type: Object,
      default: {
        //消息来源（1：好友私信 2:群聊）
        source: 0, //消息接收者ID（好友ID或者群聊ID）
        receiveId: 0,
        nickname: '',
      }
    }, //用户是否在线
    isOnline: {
      type: Boolean,
      default: false
    },
  },
  data(){
    return {
      groupNum: 0, //查看聊天记录信息
      forwardRecordBox: {
        isShow: false,
        records_id: 0
      }, //代码查看信息
      codeBlock: {
        isShow: false,
        code: "",
        lang: ""
      }, //记录加载相关参数
      loadRecord: {
        status: 0,
        minRecord: 0,
        scrollHeight: 0
      }, //多选相关操作
      multiSelect: {
        isOpen: false,
        items: [],
        mode: 0,
      }, //选择联系人窗口
      selectContacts: {
        isShow: false,
      }, //图片查看器列表
      images: [],
      groupBoxShow: false, //键盘输入事件
      keyEvent: {
        isShow: false,
        time: 0
      }, //聊天记录管理器数据
      findChatRecord: false, // 置底按钮是否显示
      tipsBoard: false,
      isShowGroupNotice: false,
    };
  },
  computed: {
    records(){
      return this.$root.message.records;
    },
    inputEvent(){
      return this.$store.state.notify.inputEvent;
    },
    scroll(){
      return this.$store.state.notify.scroll;
    },
  },
  watch: {
    // 监听面板传递参数
    params(val){
      this.loadRecord.minRecord = 0;
      this.$root.message.records = [];
      this.multiSelect = {
        isOpen: false,
        items: [],
        mode: 0
      }
      this.loadChatRecords();
      this.tipsBoard = false;
    },
    scroll(n, o){
      this.$nextTick(() => {
        this.talkPanelScrollBottom();
      });
    }, //监听聊天记录变化
    records(records){
      this.images = records.filter(item => item.msg_type == 2 && item.file.file_type == 1).map(item => item.file.file_url);
    }, //监听好友键盘事件
    inputEvent(n, o){
      this.keyEvent.isShow = true;
      setTimeout(() => {
        this.keyEvent.isShow = false;
      }, 2000);
    },
  },
  mounted(){
    this.loadChatRecords();
  },
  methods: {
    //格式化文件大小
    renderSize: formateSize, //聊天时间人性化处理
    sendTime: formateTime,
    parseTime: parseTime, //下载文件
    download, //获取光标选中内容
    getSelection, //获取图片信息
    getImgStyle(url){
      return imgZoom(url, 200);
    }, //获取图片索引
    getImgIndex(url){
      return this.images.findIndex(src => src == url);
    }, //发送消息方法
    sendSocket(event, message){
      this.$socket.emit(event,message);
    },
    formatCode(code, lang){
      return Prism.highlight(code, Prism.languages[lang], lang);
    }, //回车键发送消息回调事件
    submitSendMesage(content){
      //调用父类Websocket组件发送消息
      this.sendSocket("event_talk", {
        // 发送消息的用户ID
        send_user: this.$store.state.user.uid, // 接受者消息ID(用户ID或群ID)
        receive_user: this.params.receiveId, // 聊天类型  1:私聊 2:群聊信息显示用户昵称
        source_type: this.params.source, // 消息文本
        text_message: content,
      });
    }, // 发送代码消息
    sendCodeBlock(){
    }, //推送编辑事件消息
    keyboardEvent(){
      // 判断是否推送键盘输入事件消息
      if(!this.$store.state.settings.keyboardEventNotify){
        return false;
      }
      let time = new Date().getTime();
      //判断当前对话是否属于私聊信息
      if(this.params.source == 2 || !this.isOnline) return;
      //判断在两秒内是否已推送事件
      if(this.keyEvent.time != 0 && time - this.keyEvent.time < 2000){
        return;
      }
      this.keyEvent.time = new Date().getTime();
      //调用父类Websocket组件发送消息
      this.sendSocket("event_keyboard", {
        send_user: this.$store.state.user.uid,
        receive_user: this.params.receiveId
      });
    }, //加载用户聊天详情信息
    loadChatRecords(){
      let data = {
        record_id: this.loadRecord.minRecord,
        receive_id: this.params.receiveId,
        source: this.params.source
      };
      this.loadRecord.status = 0;
      this.loadRecord.scrollHeight = document.getElementById("lumenChatPanel").scrollHeight;
      chatRecordsServ(data).then(res => {
        //防止点击切换过快消息返回延迟，导致信息错误
        if(res.code != 200 || (data.receive_id != this.params.receiveId && data.source != this.params.source)){
          return;
        }
        let records = data.record_id == 0 ? [] : this.$root.message.records;
        records.unshift(...res.data.rows.reverse());
        this.loadRecord.minRecord = res.data.rows.length == res.data.limit ? res.data.record_id : 0;
        let user_id = this.$store.state.user.uid;
        this.$root.message.records = records.map((item) => {
          item.float = (item.user_id == 0) ? 'center' : (item.user_id == user_id ? 'right' : 'left');
          if(item.msg_type == 1){
            item.content = replaceEmoji(item.content);
          }
          return item;
        });
        this.loadRecord.status = res.data.rows.length >= res.data.limit ? 1 : 2;
        //滚动条处理
        let el = document.getElementById("lumenChatPanel");
        this.$nextTick(function(){
          if(data.record_id == 0){
            //首页加载数据滚动条置底
            el.scrollTop = el.scrollHeight;
          }else{
            //加载数据完成之后将滚动条重置到加载之前的位置
            el.scrollTop = el.scrollHeight - this.loadRecord.scrollHeight;
          }
        });
      }).catch(e => {
        this.loadRecord.status = 1;
      });
    }, //多选处理方式
    handleMultiMode(type){
      if(this.multiSelect.items.length <= 1){
        return false;
      }
      this.multiSelect.mode = type;
      if(type == 1){ //逐条转发
        if(this.verifyMultiSelectType(4)){
          this.$notify({
            title: '消息转发',
            message: '会话记录不支持合并转发'
          });
          return false;
        }
        this.selectContacts.isShow = true;
      }else if(type == 2){ //合并转发
        if(this.verifyMultiSelectType(4)){
          this.$notify({
            title: '消息转发',
            message: '会话记录不支持合并转发'
          });
          return false;
        }
        this.selectContacts.isShow = true;
      }else{ //批量删除
        let ids = this.multiSelect.items;
        removeRecordsServ({
          source: this.params.source,
          receive_id: this.params.receiveId,
          record_id: ids.join(',')
        }).then(res => {
          if(res.code == 200){
            this.delRecords(ids).closeMultiSelect();
          }
        });
      }
    }, //确认消息转发联系人事件
    confirmSelectContacts(arr){
      let user_ids = [], group_ids = [];
      arr.forEach(item => {
        if(item.type == 1){
          user_ids.push(item.id);
        }else{
          group_ids.push(item.id);
        }
      });
      this.selectContacts.isShow = false;
      forwardRecordsServ({
        forward_mode: this.multiSelect.mode,
        source: this.params.source,
        receive_id: this.params.receiveId,
        records_ids: this.multiSelect.items,
        receive_user_ids: user_ids,
        receive_group_ids: group_ids
      }).then(res => {
        if(res.code == 200){
          this.closeMultiSelect();
          this.$notify({
            title: '消息转发',
            message: '消息转发成功...',
            type: 'success'
          });
        }
      });
    }, //处理消息时间是否显示
    compareTime(index, datetime){
      if(datetime == undefined){
        return false;
      }
      if(this.$root.message.records[index].is_revoke == 1){
        return false;
      }
      datetime = datetime.replace(/-/g, "/");
      let time = Math.floor(Date.parse(datetime) / 1000);
      let currTime = Math.floor(new Date().getTime() / 1000);
      //当前时间5分钟内时间不显示
      if(currTime - time < 300) return false;
      //判断是否是最后一条消息,最后一条消息默认显示时间
      if(index == this.$root.message.records.length - 1){
        return true;
      }
      let nextDate = this.$root.message.records[index + 1].created_at.replace(/-/g, "/");
      return !(parseTime(new Date(datetime), "{y}-{m}-{d} {h}:{i}") == parseTime(new Date(nextDate), "{y}-{m}-{d} {h}:{i}"));
    }, //查看好友用户信息
    catFriendDetail(value){
      this.$refs.userBusinessCard.open(value);
    }, //查看代码显示窗口
    catCodeBlock(code, lang){
      this.codeBlock.isShow = true;
      this.codeBlock.code = code;
      this.codeBlock.lang = lang;
    }, //撤回消息
    revokeRecords(idx, item){
      revokeRecordsServ({
        record_id: item.id
      }).then(res => {
        if(res.code == 200){
          this.$root.message.records[idx].is_revoke = 1;
        }
      });
    }, //删除消息
    removeRecords(idx, item){
      let user_id = this.$store.state.user.uid;
      let receive_id = item.receive_id;
      if(item.source == 1 && item.user_id != user_id){
        receive_id = item.user_id;
      }
      removeRecordsServ({
        source: item.source,
        receive_id: receive_id,
        record_id: item.id
      }).then(res => {
        if(res.code == 200){
          this.$delete(this.$root.message.records, idx);
        }
      });
    }, //转发消息
    forwardRecords(idx, item){
      alert('单条记录转发开发中...');
    }, //从列表中删除记录
    delRecords(arr){
      arr.forEach(record_id => {
        let i = this.$root.message.records.findIndex(item => item.id == record_id);
        if(i >= 0){
          this.$delete(this.$root.message.records, i);
        }
      });
      return this;
    }, //查看会话记录列表
    catForwardRecords(records_id){
      this.$refs.forwardRecordsRef.open(records_id);
    }, //获取会话记录消息名称
    getForwardTitle(item){
      let arr = [...new Set(item.map(v => v.nickname))];
      return arr.join('、') + '的会话记录';
    }, //开启多选模式
    openMultiSelect(){
      this.multiSelect.isOpen = true;
    }, //关闭多选模式
    closeMultiSelect(){
      this.multiSelect.isOpen = false;
      this.multiSelect.items = [];
    }, //判断记录是否选中
    verifyMultiSelect(records_id){
      return this.multiSelect.items.indexOf(records_id) >= 0;
    }, //触发多选事件
    triggerMultiSelect(records_id){
      let i = this.multiSelect.items.indexOf(records_id);
      if(i >= 0){
        this.multiSelect.items.splice(i, 1);
      }else{
        if(this.multiSelect.items.length >= 30){
          this.$notify({
            title: '温馨提示',
            message: '批量操作最大支持30条数据...'
          });
          return false;
        }
        this.multiSelect.items.push(records_id);
      }
    }, //验证是否存在选择的指定类型的消息
    verifyMultiSelectType(type){
      for(let o of this.$root.message.records){
        if(this.verifyMultiSelect(o.id) && o.msg_type == type){
          return true;
        }
      }
      return false;
    }, //消息点击右键触发自定义菜单
    onCopy(idx, item, event){
      let menus = [];
      let content = '';
      if(document.getElementById('copy_class_' + item.id)){
        content = document.getElementById('copy_class_' + item.id).innerText;
      }
      if(item.msg_type == 5){
        menus.push({
          label: "查看",
          icon: 'iconfont icon-daima',
          customClass: 'cus-contextmenu-item',
          onClick: () => {
            if(item.msg_type == 5){
              this.catCodeBlock(item.code_block.code, item.code_block.code_lang);
            }
          }
        });
      }
      if(content){
        menus.push({
          label: "复制",
          icon: 'el-icon-document-copy',
          customClass: 'cus-contextmenu-item',
          onClick: () => {
            copyTextToClipboard(content);
          }
        });
      }
      if(item.user_id == this.$store.state.user.uid){
        let time = (new Date()).getTime() - Date.parse(item.created_at.replace(/-/g, "/"));
        if(Math.floor(time / 1000 / 60) < 2){
          menus.push({
            label: "撤回",
            icon: 'el-icon-s-flag',
            customClass: 'cus-contextmenu-item',
            onClick: () => {
              this.revokeRecords(idx, item);
            }
          });
        }
      }
      menus.push({
        label: "删除",
        icon: 'el-icon-delete',
        customClass: 'cus-contextmenu-item',
        onClick: () => {
          this.removeRecords(idx, item);
        }
      });
      menus.push({
        label: "转发",
        icon: 'el-icon-s-promotion',
        customClass: 'cus-contextmenu-item',
        onClick: () => {
          this.forwardRecords(idx, item);
        }
      });
      menus.push({
        label: "引用",
        icon: 'el-icon-connection',
        customClass: 'cus-contextmenu-item',
        onClick: () => {
        }
      });
      menus.push({
        label: "多选",
        icon: 'el-icon-finished',
        customClass: 'cus-contextmenu-item',
        onClick: () => {
          this.openMultiSelect();
        }
      });
      // 判断是否是图片消息
      if(item.msg_type == 2 && item.file.file_type == 1){
        menus.push({
          label: "收藏",
          icon: 'el-icon-picture',
          customClass: 'cus-contextmenu-item',
          onClick: () => {
            collectEmoticonServ({
              record_id: item.id
            }).then(res => {
              if(res.code == 200){
                this.$notify({
                  title: '收藏提示',
                  message: '表情包收藏成功...',
                  type: 'success'
                });
                this.$refs.talkEditor.reloadEmoticon();
              }
            }).catch(err => {
              this.$notify({
                title: '收藏提示',
                message: '表情包收藏失败...',
                type: 'warning'
              });
            });
          }
        });
      }
      this.$contextmenu({
        items: menus,
        event,
        customClass: "cus-contextmenu",
        zIndex: 3,
        minWidth: 120,
      });
      this.closeMultiSelect();
      event.preventDefault();
    },
    hideChatGroup(){
      this.groupBoxShow = false;
    }, //修改群聊免打扰状态
    disturbChange(detail){
      let key = this.$store.state.talks.items.findIndex(item => item.index_name == `2_${this.params.receiveId}`);
      if(key == -1) return false;
      this.$store.commit({
        type: "UPDATE_TALK_ITEM",
        key: key,
        item: {
          not_disturb: parseInt(detail.status)
        }
      });
    }, //退出群聊回调事件
    quitGroupSuccess(){
      this.$emit('close-talk');
    }, //同步群信息
    syncGroupInfo(groupInfo){
      this.groupNum = groupInfo.members_num;
    }, // 对话面板滚动事件
    talkPanelScroll(e){
      this.tipsBoard = !(Math.ceil(e.target.scrollTop) + e.target.clientHeight >= e.target.scrollHeight);
    }, // 聊天版本滚动到底部
    talkPanelScrollBottom(){
      let el = document.getElementById("lumenChatPanel");
      el.scrollTop = el.scrollHeight;
    }
  }
};

</script>
<style scoped src="@static/css/talk/style.css"></style>
